<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用DOM的getElementById和className等属性设计横向选项卡</title>
<link href="css/index_new.css" rel="stylesheet" type="text/css" />
<link href="css/index_chongzhi.css" rel="stylesheet" type="text/css" />
<style type="text/css" id="indexSkin">
  a{color:#053e76;}
  a:hover{color:red;}
  .boder1-t{border-top:1px solid #aaccee;}
  .boder1-tx{border-top:1px dashed #aaccee;}
  .boder1-l{border-left:1px solid #aaccee;}
  .boder1-r{border-right:1px solid #aaccee;}
  .boder1-b{border-bottom:1px solid #aaccee;}
  .boder1{border:1px solid #aaccee;}
  .boder2-t{border-top:2px solid #6293be;}
  .boder2-l{border-left:2px solid #6293be;}
  .boder2-r{border-right:2px solid #6293be;}
  .boder2-b{border-bottom:2px solid #6293be;}
  .boder2{border:2px solid #6293be;}
  .boder-r-w{border-right-color:#ffffff;}
  .boder-b-c{border-bottom-color:#aaccee;}
  .back-color{background-color:#f3faff;}
  .back-color2{background-color:#ecf7ff;}
  .back-color3{background-color:#ffffff;}
  .color1{color:#07519a;}
  .color2{color:#044691;}
  .back-image{ background: url(images/skin/blue_bg.png) no-repeat; }
  ul.taba li.at1{font-weight:700;border-bottom:none;padding-bottom:3.3px}
</style>
<script type="text/javascript">
function changeLeftTab(cursel) {
  var name = "query";
  for (i = 1; i <= 3; i++) {
	var menu = document.getElementById(name + i);
	var con = document.getElementById("s_" + name + i);
	menu.className = i == cursel ? "boder1-r boder1-b at1 back-color color1" : "boder1-r boder1-b back-color3 color1";
	con.style.display = i == cursel ? "block" : "none";
  }
}
//手机充值form提交时需要的验证方法
function chongzhiActionCheck() {
    var val = document.getElementById('J_TelInput').value;
    if (val == '' || val.length != 11) {
        alert('请输入正确的手机号!');
        return false;
    }
    return true;
}
</script>
</head>

<body>
<div class="container">
  <div class="lb">
    <div id="tagBox" class="g zx back-color boder1">
      <ul class="taba">
        <li id="query1" onClick="changeLeftTab(1)" class="boder1-r boder1-b back-color3 color1">手机安全充值</li>
        <li id="query2" onClick="changeLeftTab(2)" class="boder1-r boder1-b at1 back-color color1" style="color:#FF0000;" >机票</li>       
        <li id="query3" onClick="changeLeftTab(3)" class="boder1-r boder1-b back-color3 color1">酒店</li>
      </ul>
      <div class="z1 back-color" id="s_query1" style="display:none">
        <div class="tk210x30">
          <form action="chongzhi.html" id="formchzh" method="get" onSubmit="return chongzhiActionCheck();">
          <div class="tel-section">
            <input id="J_TelInput" class="text-filed" maxLength="11" type="text" name="J_TelInput" />
            <select id="J_Dnomination" class="tel-section-select" name="J_Dnomination">
              <option value="30677">20元</option>
              <option value="30688">30元</option>
              <option value="30678" selected="selected">50元</option>
              <option value="30679">100元</option>
              <option value="30690">200元</option>
              <option value="30691">300元</option>
            </select>
          </div>
          <input type="submit" value="充值" id="J_TelSubmitBtn" class="tel-submit" />
          </form>
        </div>
        <p class="chongzhi_text">
            瑞星手机安全软件：&nbsp;<a href="">安卓</a>
            &nbsp;&nbsp;<a href="">iphone</a>
        </p>
      </div>
      <div class="z back-color" id="s_query2">
        <iframe src="taobao/jipiao.html" width="226px" height="60px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
      </div>
      <div class="z back-color" id="s_query3"  style="display:none">
        <iframe src="taobao/jiudian_zs.htm" width="230px" height="60px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>
</body>
</html>
